var WFComponentWindow = new Class({
    Implements: [Options, Events],
    options: {
        name: 'sample',
        title: 'sample',
        loadCSS: false,
        parentNode: document.body,
        data: '',     //settings
        isTargetEnabled: false,
        targets:[],
        switchBtn_leftTip: 'sample_leftTip',
        switchBtn_rightTip: 'sample_rightTip',
        switch_message:'sample_message'
    },
    rendered: false,
    switchStatus: '',
    initialize: function(parentNodeSelector, data, componentStatus, arrActivatedComponentNames){
        if (parentNodeSelector){
            this.options.parentNode = $(this.options.parentNode).getElement(parentNodeSelector);
        }
		
        if (data){
            this.options.data = data;   
        }

        //load css
        if(this.options.loadCSS && !wfc_component_cssloaded.contains(this.options.name)){	
            Asset.css(WP_WEBROOT_NO_SLASH+'/widgetComponent/'+this.options.name+'/'+this.options.name+'.css');
            wfc_component_cssloaded.push(this.options.name);
        }

        var componentHTML = [
            '    <table class="component '+this.options.name+'">',
            '        <thead class="component_hd">',
            '            <tr>',
            '                <th class="title clearfix">',
            '                    <div class="name off" title="'+html_entity_decode(this.options.title)+'">'+html_entity_decode(this.options.title)+'</div>',
            '                    <div class="switch_border hide">',
            '                        <div class="switch_button"></div>',
            '                        <div class="switch_tip hide"></div>',
            '                    </div>',
            '                </th>',
            '            </tr>',
            '        </thead>',
            '        <tbody class="component_bd hide">',
            '            <tr>',
            '                <td class="component_bd_container"></td>',
            '            </tr>',
            '        </tbody>',
            '     </table>'
        ].join("");

        this.component = new Element('div',{'html':componentHTML}).inject(this.options.parentNode,'inside');
        if (componentStatus){
            this.containerStatus = new Element('span', {'class':'status '+componentStatus,'html':lang.label(componentStatus)}).inject(this.component.getElement('.name'),'inside');
        }
        this.container = new Element('div',{'class': 'container hide'}).inject(this.component.getElement('.component_bd_container'), 'inside');
        this.container_message = new Element('div',{'class': 'container_message hide','html':this.options.switch_message}).inject(this.component.getElement('.component_bd_container'), 'inside');

        if(arrActivatedComponentNames.contains(this.options.name)){
            this.component.getElement('.switch_button').addClass('left_switch');
            this.component.getElement('.switch_tip').set('html', this.options.switchBtn_leftTip);
            this.component.getElement('.container').removeClass('hide');
            this.switchStatus = 'switchBtn_leftTip';
        }else{
            this.component.getElement('.switch_button').addClass('right_switch');
            this.component.getElement('.switch_tip').set('html', this.options.switchBtn_rightTip);
            this.component.getElement('.name').addClass('disable');
            this.component.getElement('.container_message').removeClass('hide');
            this.switchStatus = 'switchBtn_rightTip';
        }
		
        //bind toggle
        this.component.getElement('.title').addEvent('click', function (e) {
            var name = this.component.getElement('.name');
            if (name.hasClass('off')){
                name.removeClass('off');
                name.addClass('on');
            }else{
                name.removeClass('on');
                name.addClass('off');   
            }

            var componentBD = this.component.getElement('.component_bd');
            if (componentBD.hasClass('hide')){
               componentBD.removeClass('hide');
            }else{
                componentBD.addClass('hide');    
            }
            if (!this.rendered){
                this.rendered = true;
                this.render();
            }
        }.bind(this));

        var switchBtn = this.component.getElement('.switch_button');
            switchBtn.addEvents({
                'click': function(e){
                    if (e){
                        if(e.preventDefault()){
                            e.preventDefault();
                        }
                        e.stopPropagation();
                    }
                    if (switchBtn.hasClass('left_switch')){
                        switchBtn.removeClass('left_switch');
                        switchBtn.addClass('right_switch');
                        this.component.getElement('.switch_tip').set('html', this.options.switchBtn_rightTip);
                        this.component.getElement('.container').addClass('hide');
                        this.component.getElement('.name').addClass('disable');
                        this.component.getElement('.container_message').removeClass('hide');
                        this.switchStatus = 'switchBtn_rightTip';
                    }else{
                        switchBtn.removeClass('right_switch');
                        switchBtn.addClass('left_switch');
                        this.component.getElement('.switch_tip').set('html', this.options.switchBtn_leftTip);
                        this.component.getElement('.container_message').addClass('hide');
                        this.component.getElement('.name').removeClass('disable');
                        this.component.getElement('.container').removeClass('hide');
                        this.switchStatus = 'switchBtn_leftTip';
                    }
                }.bind(this),
                'mouseover': function(e){
                    this.component.getElement('.switch_tip').removeClass('hide');
                }.bind(this),
                'mouseout': function(e){
                    this.component.getElement('.switch_tip').addClass('hide');
                }.bind(this)
            });
 
    },
    getParam: function(callBack){
        var data = JSON.encode({act:'getWcomponentParamByWcomponentName',wcomponent_name:this.options.name});
        sendData(dbHandler, data, function(responseText){
            responseText = JSON.decode(responseText[0]);
            if(responseText && responseText.response && responseText.response == 'OK'){
                this.param = responseText.result.wcomponent_param;
                callBack();
            }
        }.bind(this));
    },
    render: function(){
    },
    getData: function(){
    },
    setData: function(data){
    },
    setReadOnly: function(){
    },
    validate: function(){
        return true;
    },
    isNew: function(){
        if (this.containerStatus){
            return this.containerStatus.hasClass('new');
        }else{
            return false;
        }
    },
    isUpdated: function(){
        if (this.containerStatus){
            return this.containerStatus.hasClass('updated');    
        }else{
            return false;
        }
    },
    isTargetEnabled: function(){
        return this.options.isTargetEnabled;
    },
    setTargetEnabled: function(isTargetEnabled){
        return this.options.isTargetEnabled = isTargetEnabled;
    },
    getTargets: function(){
        if(this.isTargetEnabled()){
            return this.options.targets;
        }else{
            return null;
        }
    },
    setTargets: function(targets){
        this.options.targets = targets;
    }
});
